<template>
  <div class="assetsAndMaterials">
    <headerBox :leftData="leftData" :active="4"></headerBox>
    <div class="assetsAndMaterials_content">
      <div class="assetsAndMaterials_content_top content_box">
        <div class="assetsAndMaterials_content_top_left" @click="goToUrl(0)">
          <tableBox class="goodsTable" :data="goodsTableData" :show-serial-number="false" :showThead="false" />
        </div>
        <pieChart id="goodsCharts" ref="goodsCharts" height="100%" width="40%"></pieChart>
        <div style="width: 40%;" @click="goToUrl(1)">
          <pieChart id="semFinishedCharts" ref="semFinishedCharts" height="100%" width="100%"></pieChart>
        </div>
      </div>
      <div class="assetsAndMaterials_content_center content_box">
        <lineBarChart ref="consumeChart" id="consumeChart" width="80%" height="96%"></lineBarChart>
        <tableBox class="consumeTable" :data="tableData" :show-serial-number="false" :showThead="true"
          :thead-list="consumeTableThead" />
      </div>
      <div class="assetsAndMaterials_content_bottom" @click="goToUrl(2)">
        <div class="bottom_left">
          <pieChart id="purchasePieChart" ref="purchasePieChart" height="100%" width="50%"></pieChart>
          <tableBox class="purchaseTable" :data="purchaseTableData" :show-serial-number="false" :showThead="true"
            :thead-list="tableThead" />
        </div>

        <div class="bottom_right" @click="goToUrl(3)">
          <pieChart id="deliveryPieChart" ref="deliveryPieChart" height="100%"></pieChart>
          <tableBox class="deliveryTable" :data="deliveryTableData" :show-serial-number="true" :showThead="false" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import lineBarChart from "../components/lineBarChart.vue"
import {
  getCommodityStockSaleByCommodityTypeTable, getCompanyCommodityTypeSaleRate, getMaterialsInfoSaleDayImg, getMaterialsInfoSaleTable,
  getSaleCommodityTypeRate, getSaleCommodityTypeTable, getSaleCustomerOrderRate, getSaleOrderInfoTable
} from "@/api/bi/sale";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      leftData: {
        title: '资产物资',
        desc: 'Assets and Materials'
      },
      load: null,
      time: null,
      radio: '数量',
      goodsTableData: [],
      tableData: [],
      purchaseTableData: [],
      consumeTableData: [],
      deliveryTableData: [],
      consumeTableThead: ['商品大类', '销售金额叠加', '利润额叠加 '],
      tableThead: ['商品大类', '销量', '金额']
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });


    this.gettStockTableData()
    this.getCommodityTypeData()
    this.getMaterialsInfoCostData()
    this.getMaterialsInfoCostDay()
    this.getPurchase()
    this.getDelivery()
  },
  methods: {
    // 获取物资库存   
    async gettStockTableData() {
      const { data: res } = await getCommodityStockSaleByCommodityTypeTable();
      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let styleT = "background: #EEEFF3;border-right:1px solid #fff;border-top:1px solid #fff"

      let head = [
        [{ val: '商品大类', style }, { val: '公司库存', style }, { val: '已售商品', style }, { val: '可售商品', style }, { val: '锁定库存', style }],
      ]
      let arr = []
      res.forEach((item, index) => {
        arr.push([{ val: item.commodityTypeName }, { val: item.stockNumber }, { val: item.saleNumber }, { val: (item.stockNumber - item.lockNumber - item.saleNumber) }, { val: item.lockNumber }])
      })

      this.goodsTableData = [...head, ...arr]
    },
    // 获取商品类别占比图
    async getCommodityTypeData() {
      const { data: res } = await getCompanyCommodityTypeSaleRate();
      let chartData = []
      res.forEach((item, index) => {
        chartData.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      let l = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }
      let title = {
        text: '商品类别占比',
        left: 'center'
      }
      let title2 = {
        text: '半成品库存占比',
        left: 'center'
      }
      this.$refs.goodsCharts.initChart(chartData, l, title, '60%')

      // this.$refs.semFinishedCharts.initChart(chartData, l, title2, '60%')

    },
    // 获取消耗/维修/折旧数据
    async getMaterialsInfoCostDay() {
      const { data: res } = await getMaterialsInfoSaleDayImg();
      let title = {
        text: '销售品类月利润图',
        left: 'center'
      }
      let xAxisData = []
      let legendData = { show: true, data: ['清洁工具', '清洁药剂', '垃圾处置', '承载收纳', '机械配件', '客用品', '劳保用品', '其他', '销售利润'] }
      let seriesData = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      legendData.data.forEach((item, index) => {

        let type = { type: 'line' }
        if (index < 8) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }
        seriesData.push(
          {
            name: item,
            ...type,
            data: res.dataVal[index],
          },
        )
      })

      this.$refs.consumeChart.initChart(legendData, xAxisData, seriesData, title)
      this.load.close();

    },

    // 获取表格数据
    async getMaterialsInfoCostData() {
      const { data: res } = await getMaterialsInfoSaleTable();
      res.forEach((item, index) => {
        this.tableData.push([{ val: item.commodityTypeName, }, { val: item.saleMoney }, { val: item.saleProfit }])
      })
    },
    // 获取采购订单 
    async getPurchase() {
      const { data: rateRes } = await getSaleCommodityTypeRate();
      const { data: tabRes } = await getSaleCommodityTypeTable();

      let chartData = []
      rateRes.forEach((item, index) => {
        chartData.push({ value: item.saleTypeRate, name: item.commodityTypeName },)
      })
      let title = {
        text: '销售品类占比',
        left: 'center'
      }
      this.$refs.purchasePieChart.initChart(chartData, null, title)

      tabRes.forEach(item => {
        this.purchaseTableData.push([{ val: item.commodityTypeName, }, { val: item.saleNumber }, { val: item.saleMoney }])
      })

    },

    // 配送订单
    async getDelivery() {

      const { data: rateRes } = await getSaleCustomerOrderRate();
      const { data: tableRes } = await getSaleOrderInfoTable();

      let chartData = []
      rateRes.forEach((item, index) => {
        chartData.push({ value: item.saleTypeRate * 100, name: item.customerName },)
      })
      let title = {
        text: '销售客户金额占比 ',
        left: 'center'
      }
      this.$refs.deliveryPieChart.initChart(chartData, null, title,)

      this.deliveryTableData = [
        [{ val: '总配送订单数量', }, { val: tableRes.sumNumber }],
        [{ val: '开具订单数', }, { val: tableRes.deliverNumber }],
        [{ val: '取消订单数', }, { val: tableRes.unDeliverNumber }],
        [{ val: '未完成订单数', }, { val: tableRes.unSuccessNumber }],
        [{ val: '已完成订单数', }, { val: tableRes.successNumber }],
      ]
    },
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
    // 跳转
    goToUrl(active) {
      this.$router.push({ path: '/sales/item', query: { active } })
    }
  }

}
</script>
<style lang="scss" scoped>
.assetsAndMaterials {
  background: #F2F4FC;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .assetsAndMaterials_content {
    flex-grow: 1;
    height: 100%;
    width: 100%;

    padding: 16px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;

    .content_box {
      background-color: rgba(255, 255, 255, 0.6);
      width: 100%;
      height: 30%;
      padding: 16px 22px;
      flex-grow: 1;
    }

    .content_box:nth-child(2) {
      margin: 20px 0;
    }

    .assetsAndMaterials_content_top {
      display: flex;
      width: 100%;

      .assetsAndMaterials_content_top_left {
        width: 70%;
        display: flex;
      }
    }

    .assetsAndMaterials_content_center {
      display: flex;
      width: 100%;

      .consumeTable {
        width: 30%;
      }
    }

    .assetsAndMaterials_content_bottom {
      display: flex;
      justify-content: space-around;
      background: transparent;
      height: 30%;

      >div {
        width: 49%;
        padding: 16px 22px;
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;
      }

      .purchaseTable {
        width: 48%;
      }
    }

  }
}
</style>
